<template>
	<div class="body_inner">

		<div class="interest_page">
			<div class="header">
				<a href="/main" class="logo"><img src="../assets/img/icon/logo.png" alt=""></a>

				<div class="allMenu_btn" v-if="!allMenuShow" @click="allMenuShow = true">
					<div class="x"></div>
					<div class="y"></div>
					<div class="z"></div>
				</div>
				<div class="allMenu_btn open" v-if="allMenuShow" @click="allMenuShow = false">
					<div class="x coll rotate30 rotate45"></div>
					<div class="y coll" style="display: none;"></div>
					<div class="z coll rotate150 rotate135"></div>
				</div>
			</div>

			<div class="accountMenu">
				<div class="info">
					<div class="left">
					  <img src="../assets/img/icon/m_master.png" alt="" v-if="is_master == 1">
					  <p class="name">{{indeData.user_no}}</p>
					  <p class="name" id="copyText" style="position: absolute;z-index: -1;opacity: 0;">{{'https://test.pdt-daily.com/join?referno=' + indeData.user_no}}</p>
					</div>
					
					<div class="right">
						<button type="button" class="copy" data-clipboard-target="#copyText"><i
								class="xi-documents-o"></i></button>
						<button type="button" class="open_modal" @click="addAcount()"><i class="xi-plus"></i></button>
						<button type="button" class="open_modal_2" @click="allAccount = !allAccount"><i
								class="xi-caret-down-min"></i></button>
					</div>
				</div>

				<div id="accountPlus" v-if="allAccount">
					<ul>
						<li v-for="(value,index) in accountList" :key="index"><a>{{value.user_no}} <i class="xi-repeat"
									@click="swichAccount(index)"></i></a></li>
					</ul>
				
					<button type="button" class="open_modal"><i class="xi-plus" @click="addAcount()"></i>계정 추가</button>
				</div>
			</div>

			<section>
				<ul class="tab">
					<li v-for="(value,index) in list" :key="index" :class="index == indextyepe?'on':''" @click="swiching(index,value.type)">{{value.value}}</li>
				</ul>

				<ul class="list">
					<li v-for="(value,index) in dataList" :key="index" :class="value.type == 1?'daily':value.type == 6?'suggestion':value.type == 2?'master':''">
						<div>
							<p class="name">{{value.price}} PDT（1.0PDT = ${{value.pdt_every_price}}）</p>
							<p class="date">{{value.create_time}}</p>
						</div>
						<p class="type" v-if="value.is_freeze == 0">{{value.type == 1?'데일리':value.type == 6?'레퍼럴':value.type == 2?'마스터':''}}</p>
						<p class="type" v-else>{{value.buy_num}}회 초과분 {{value.proportion}}%</p>
					</li>

					<!-- <li class="daily">
						<div>
							<p class="name">0.2 PDT</p>
							<p class="date">2024-03-04 12:00</p>
						</div>
						<p class="type">데일리</p>
					</li>

					<li class="master">
						<div>
							<p class="name">0.2 PDT</p>
							<p class="date">2024-03-05 12:00</p>
						</div>

						<p class="type">마스터</p>
					</li>

					<li>
						<div>
							<p class="name">0.2 PDT</p>
							<p class="date">2024-03-04 12:00</p>
						</div>

						<p class="type">1회 초과분 10%</p>
					</li> -->
				</ul>
			</section>

			<!-- <ul class="footer">
				<li><a href="/main"><i class="xi-home"></i>홈</a></li>
				<li><a href="/withdraw_apply"><i class="xi-money"></i>출금신청</a></li>
				<li><a href="/interest"><i class="xi-piggy-bank"></i>데일리내역</a></li>
				<li><a href="/staking"><img src="../assets/img/icon/staking_icon.png" alt="">상품 구매</a></li>
			</ul> -->
		</div>

		<nav id="allMenu" v-if="allMenuShow">
			<ul>
				<li>
					<a href="/main">
						<p><i class="xi-home"></i>홈</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/staking">
						<p><i class="xi-bank"></i>상품 구매</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/staking_sum">
						<p><i class="xi-credit-card"></i>상품 구매 합계</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/interest">
						<p><i class="xi-piggy-bank"></i>데일리내역</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/withdraw_apply">
						<p><i class="xi-money"></i>출금신청</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/withdraw_list">
						<p><i class="xi-wallet"></i>출금/송금내역</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/recommender">
						<p><i class="xi-group"></i>추천인 목록</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/mypage">
						<p><i class="xi-profile-o"></i>마이페이지</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>
			</ul>

			<div class="btn" @click="logout()">로그아웃</div>
		</nav>

		<div id="recommenderModal" class="modal" v-if="showModel">
		  <div class="modal_body">
		    <h3>추가계정 <span>{{next_account}}</span> 을(를) <br>추가 하시겠습니까?</h3>
		
		    <button class="btn finish_btn" @click="creatAccount()">추가</button>
		    <button type="button" class="btn close_btn" @click="showModel = false">닫기</button>
		  </div>
		</div>
		

	</div>
</template>
<script>
	import {
		connect,
		stake,
		gelSolBal
	} from "../util/dapp"
	import axios from "axios";
	export default {
		data() {
			return {
				showModel: false,
				indeData: {},
				is_master: null,
				accountList: [],
				next_account: '',
				allAccount: false,
				info: {
					is_master: null,
					max_proportion: null,
					next_account: "",
					now_proportion: 0,
					now_reward: "",
					now_reward_pdt: "",
					now_usdt: "",
					now_usdt_pdt: "",
					pdt: "",
					self_buy_price: "",
				},
				dataList: [],
				loading: false,
				type:-1 ,//全部 -1   1每日 2大师 6下家
				list:[
					{
						value:"전체",
						type:-1
					},
					{
						value:"데일리",
						type:1
					},
					{
						value:"레퍼럴",
						type:6
					},
					{
						value:"마스터",
						type:2
					}
				],
				indextyepe:0,
				allMenuShow:false
			}; 
		},
		created() {
		},
		mounted() {
			this.getInfo();
			// 获取list
			this.getDaily();
		},
		methods: {
			swiching(index,type){
				this.indextyepe = index;
				this.type = type;
				this.getDaily();
			},
			getDaily(){
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/log/usdt_log', {
					type:_this.type
				}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					_this.dataList = response.data.data.list.data;
				}).catch(function(error) {
					console.log(error);
				});
			},
			// 添加账户
			addAcount() {
				if (!this.next_account) {
					alert('현재 계정을 만들 수 없습니다.')
					return;
				}
				if (this.next_account == 1) {
					alert('구매 금액 부족')
					return;
				}
				this.showModel = true;
			},
			// 切换账号
			swichAccount(index) {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/user/change_account', {
					user_id: _this.accountList[index].user_id
				}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						_this.allAccount = false;
						localStorage.setItem('token', response.data.data.token);
						_this.getInfo();
						_this.getDaily()
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			creatAccount() {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/user/add_account', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						_this.showModel = false;
						_this.getInfo();
					}
					if (response.data.status == 306) {
						alert(response.data.message);
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			getInfo() {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/index/index', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						_this.info = response.data.data.data;
						_this.accountList = response.data.data.list;
						_this.next_account = response.data.data.data.next_account;
						_this.is_master = response.data.data.data.is_master;
						_this.indeData = response.data.data.user_info;
					}
					if(response.data.status == 401){
						_this.$router.push('/login');
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			logout() {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/user/logout', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						alert('로그아웃 되었습니다.');
						localStorage.setItem('token', '');
						_this.$router.push('/login');
					}
				}).catch(function(error) {
					console.log(error);
				});
			}
		},
	};
</script>